<template>
	<view class="nav_outer"
		><view class="tabsStyle"
			><u-tabs
				:gutter="150"
				active-color="#5690FB"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="100"
				@change="tabChange"
			></u-tabs
		></view>
		<!-- 门诊 -->
		<view v-if="current == 0">
			<!-- 数据 -->
			<view v-if="outpatient">
				<view>{{ dataList }}</view>
			</view>
			<!-- 无数据 -->
			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<!-- 住院 -->
		<view v-if="current == 1">
			<!-- 数据 -->
			<view v-if="hospitalized">
				<view>{{ hospitalizedList }}</view>
			</view>
			<!-- 无数据 -->
			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 门诊数据
			dataList: '',
			outpatient: false,
			// 住院数据
			hospitalizedList: '测试数据',
			hospitalized: false,
			tabList: [
				{
					name: '门诊',
				},
				{
					name: '住院',
				},
			],
			current: 0,
			barStyle: { backgroundColor: '#5690FB' },
		}
	},
	created() {
		console.log(this.current, '默认数据')
	},
	onReady() {
		if (this.dataList == '') {
			this.outpatient = false
		} else {
			this.outpatient = true
		}
		if (this.hospitalizedList == '') {
			this.hospitalized = false
		} else {
			this.hospitalized = true
		}
	},
	methods: {
		tabChange(index) {
			console.log(index, '切换')
			this.current = index
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.tabsStyle {
	border-top: 1px solid #d4d4d4;
	margin-bottom: 30rpx;
	.contentTitle {
		font-size: 33rpx;
		font-weight: bold;
		color: #828282;
		padding-left: 10rpx;
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>